<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <title>AngularJS+bootstrap分页显示</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.css">
<style type="text/css">
*{margin:0;padding:0}
a{text-decoration:none;color:#111;font-size:16px;}
ul,li{list-style:none;}
body{font-size:12px;font-family:"微软雅黑";}
</style>
</head>
<body>
   <!-- 表格部分 -->
   <table class="table table-bordered">
       <tr>
           <th>序号</th>
           <th>商品编号</th>
           <th>名称</th>
           <th>价格</th>
       </tr>
       <tr>
           <td>1</td>
           <td>101</td>
           <td>电视机</td>
           <td>2000</td>
       </tr>
   </table>


   <!-- 分页工具条 -->
   <div>
       <ul class="pagination pull-right">
           <li>
            <a href ng-click="prev()">上一页</a>
           </li>
           <li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}">
              <a href ng-click="selectPage(page)">{{page}}</a>
           </li>
           <li>
               <a href ng-click="next()">下一页</a>
           </li>
       </ul>
   </div>

 <script type="text/javascript">
        var foreachapp = angular.module("foreachapp",[]);
    // 需要发$http请求就 注入$http
    foreachapp.controller("foreachctrl",["$scope","$http",function($scope,$http){
      $http({
        method : 'GET',
        /*products 集合数据请求的路径*/
        url:'product_json.json',
        params:{
          /*请求数据成功后把响应回data数据 赋值给$scope域的proudcts*/

        }
      }).success(function(data,status,headers,config){
        $scope.products = data.products;
      }).error(function(data,status,headers,config) {
         //当响应以错误状态返回时调用
         alert("短信发送失败，请联系管理员");
      });
    }])
 </script>
 </body>
</html>